/*-------------------   外部导入   -------------------------------------------------------------------*/

import { Card, Space, Button, Input, Col, Row, Table, Tag ,Dropdown,message, } from "antd";
import type { ColumnsType } from 'antd/es/table';
import type { MenuProps } from 'antd';
import React from "react";
import { useState, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
// 导入样式
import "../../../assets/style/home.scss";
// 字体图标
import { SearchOutlined, RedoOutlined, PlusOutlined,DownOutlined, } from "@ant-design/icons";
// 导入接口
import { getAttrValue } from "../../../api/admin";
/*-------------------   外部导入   -------------------------------------------------------------------*/

/*vvvvvvvvvvvvvvvvvvv   以下是函数组件内容  vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv*/
function listOwner() {
  /*-------------------   定义数据   -------------------------------------------------------------------*/
  // 户主信息
  const [userlist, setUserlist] = useState();
  const [expand, setExpand] = useState(false);
  const navigate = useNavigate();
  // 表格类型
  interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
  }

  // 获取数据
  useEffect(() => {
    const obj = {
      specCd: "081681590010",
      page: 1,
      row: 100
    };
    getAttrValue(obj).then(res => {
      console.log(res);
      setUserlist(res.data.owners);
    });
    
  }, []);

  // 表格标题--11个
  const columns: ColumnsType<DataType> = [
    {
      title: '业主ID',
      dataIndex: 'memberId',
      key:"memberId"
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key:"name"
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key:"sex"
    },
    {
      title: '年龄',
      dataIndex: 'remark',
      key:"remark"
    },
    {
      title: '身份证',
      dataIndex: 'idCard',
      key:"idCard"
    },
    {
      title: '练习方式',
      dataIndex: 'link',
      key:"link"
    },
    {
      title: '家庭地址',
      dataIndex: 'address',
      key:"address"
    },
    {
      title: '创建员工',
      dataIndex: 'userName',
      key:"userName"
    },
    {
      title: '门禁钥匙',
      dataIndex: 'remark',
      key:"remark"
    },
    {
      title: 'QQ',
      dataIndex: 'address3',
      key:"address3"
    },
    {
      title: '操作',
      dataIndex: 'memberId',
      key:"memberId",
      render: (memberId) => <div>
        <Dropdown menu={{items}}>
          <Button>
            <Space>
              变更
              <DownOutlined />
            </Space>
          </Button>
        </Dropdown>
          <Button onClick={()=>{change(memberId)}}>
            详情
          </Button>
      </div>,
    },
  ];
  // 变更 下拉菜单数据
  const items: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <span > 修改业主 </span>
      ),
    },
    {
      key: '2',
      label: (
        <span > 删除业主</span>
      ),
    },
    {
      key: '3',
      label: (
        <span>入住房屋</span>
      ),
    },
    {
      key: '4',
      label: (
        <span >房屋解绑</span>
      ),
    },
  ];
  /*-------------------   定义数据   -------------------------------------------------------------------*/

  const change = (e:any)=>{
    // 详情数据
    var obj = {}
    console.log(userlist);
    for(var i = 0; i < userlist.length; i++) {
      if(e==userlist[i].memberId) {
        obj = userlist[i]
      }
    }
    navigate("/pages/property/ownerDetail?ownerId="+obj.memberId+"&ownerName="+obj.name)
    console.log(obj)
  }
  /*vvvvvvvvvvvvvvvvvvv   以下是DOM渲染内容  vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv*/
  return (
    <div className="listOwner">
      <Space
        direction="vertical"
        size={24}
        style={{ width: "100%", height: "100%" }}
      >
        <Card title="查询条件"  extra={<span style={{color:"#1878ff"}} onClick={()=>{setExpand(!expand)}}>更多</span>}>
          <Row gutter={24}>
            <Col span={8}>
              <Input placeholder="请输入业主信息" style={{ height: "40px" }} />
            </Col>
            <Col span={8}>
              <Input
                placeholder="请输入房屋编号&ensp;格式&ensp;楼栋-单元-房屋"
                style={{ height: "40px" }}
              />
            </Col>
            <Col span={4}>
              <Input placeholder="请输入联系方式" style={{ height: "40px" }} />
            </Col>
            <Col span={4}>
              <Button
                type="primary"
                icon={<SearchOutlined />}
                style={{ height: "40px" }}
              >
                搜索
              </Button>
              &ensp;<Button
                type="primary"
                icon={<RedoOutlined />}
                style={{ height: "40px" }}
              >
                重置
              </Button>
            </Col>
          </Row>
          <Row gutter={24} style={{marginTop:"10px", display: expand ? "flex" : "none" }}>
            <Col span={8}>
              <Input placeholder="请输入业主ID" style={{ height: "40px" }} />
            </Col>
            <Col span={8}>
              <Input placeholder="请输入业主身份证号" style={{ height: "40px" }} />
            </Col>
            <Col span={8}></Col>
          </Row>
        </Card>
        <Card
          title="业主信息"
          extra={
            <Button
              icon={<PlusOutlined />}
              type="primary"
              style={{ height: "40px" }}
            >
              添加户主
            </Button>
          }
        >

          <Table columns={columns} dataSource={userlist} size="middle" />

        </Card>
      </Space>
    </div>
  );
}

export default listOwner;
